import { ApiQuick } from "@/utils/api";
import { Toast, Image, Button } from "antd-mobile";
import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";

type Props = {};

export default function index({}: Props) {
  const [quickData, setQuickData] = useState<IQuickData>();

  // 请求数据
  const getData = async () => {
    let res: IResponseData;
    try {
      // try里面的代码（调用栈）发生错误，catch就会接受错误。
      res = await ApiQuick();
    } catch (err: any) {
      let res = err.response.data;
      if (res.message) {
        Toast.show({
          icon: "fail",
          content: res.message,
        });
        return;
      } else {
        Toast.show({
          icon: "fail",
          content: "系统发生错误, 请联系管理员! ",
        });
        return;
      }
    }

    setQuickData(res.data);
  };

  // 生命周期
  useEffect(() => {
    getData();
  }, []);

  return (
    <div
      className={[styles["qd-examentry-area"], "qdtabbar-container"].join(" ")}
    >
      {quickData?.records.map((item, index) => {
        return (
          <div className="qd-examentry-item" key={index}>
            <div className="qd-examentry-item-column1">
              <Image src="./images/home/subject.png"></Image>
            </div>
            <div className="qd-examentry-item-column2">
              <div className="qd-title">{item.title}</div>
            </div>
            <div className="qd-examentry-item-column3">
              {/* 在行内样式写的话，不会转换成vw */}
              <Button
                color="primary"
                onClick={() => {
                  Toast.show({
                    // icon: ""
                    content: "该功能尚未开放",
                  });
                }}
              >
                刷题
              </Button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// 快速刷题数据
interface IQuickData {
  records: IRecord[];
  total: number;
  size: number;
  current: number;
  orders: any[];
  hitCount: boolean;
  searchCount: boolean;
  pages: number;
}

interface IRecord {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
}

// 1、新建请求接口，在api.ts中，添加
//     // 快速刷题
//     export const ApiQuick = () => fetch("/4698", {}, {}, "GET");

// 2、先发起请求，返回参数，将参数转换成interface。（vscode 中的json to ts扩展）

// 3、在quick的index.tsx中对请求接口进行调用
//     const [quickData, setQuickData] = useState<IQuickData>();

//     // 请求数据
//     const getData = async () => {
//         let res: IResponseData = await ApiQuick();
//         setQuickData(res.data as IQuickData);
//     }

//     // 生命周期
//     useEffect(() => {
//         getData()
//     }, [])

// 4、对quickData数据进行渲染
//   return <div className={
//       [
//         styles['qd-examentry-area'],
//         "qdtabbar-container"
//       ].join(' ')
//     }>
//     {quickData?.records.map((item, index) => {
//       return (
//         <div className="qd-examentry-item" key={index}>
//           <div className="qd-examentry-item-column1">
//             <Image src="./images/home/subject.png"></Image>
//           </div>
//           <div className="qd-examentry-item-column2">
//             <div className="qd-title">{item.title}</div>
//           </div>
//           <div className="qd-examentry-item-column3">
//             {/* 在行内样式写的话，不会转换成vw */}
//             <Button color="primary">刷题</Button>
//           </div>
//         </div>
//       );
//     })}
//   </div>;
